﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>对话框</title>
    <link href="jquery-ui-1.10.4.custom/css/ui-lightness/jquery-ui-1.10.4.custom.min.css" rel="stylesheet" />
    <style type="text/css">
        label, input {
            display: block;
        }

            input.text {
                margin-bottom: 12px;
                width: 95%;
                padding: .4em;
            }

        fieldset {
            padding: 0;
            border: 0;
            margin-top: 25px;
        }
    </style>
</head>
<body>
    <div>
        <button type="button" onclick="messageBox();">弹出消息框</button>
        <div id="messagebox" title="系统消息">
            <div style="text-align:center"><strong>下载完成！</strong></div>
        </div>
    </div>

    <div>
        <button type="button" onclick="messageBox2()">弹出消息框(自定义按钮)</button>
        <div id="messagebox2" title="系统消息">
            <div style="text-align:center"><strong>下载完成！</strong></div>
        </div>
    </div>

    <div>
        <button type="button" onclick="confirmbox();">弹出确认框</button>
        <div id="confirmbox" title="系统消息">
            <div style="text-align:center"><strong>是否删除此记录？</strong></div>
        </div>
        <div id="confirmresult" title="系统消息">
            <div style="text-align:center"><strong>记录已删除！</strong></div>
        </div>
    </div>

    <div>
        <button type="button" onclick="register();">注册</button>
        <div id="registerbox" title="用户注册">
            <form>
                <fieldset>
                    <label for="name">姓名</label>
                    <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all">
                    <label for="email">电子邮件</label>
                    <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all">
                    <label for="password">密码</label>
                    <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all">
                </fieldset>
            </form>
        </div>
    </div>

    <script src="scripts/jquery-1.11.0.min.js"></script>
    <script src="jquery-ui-1.10.4.custom/js/jquery-ui-1.10.4.custom.min.js"></script>

    <script type="text/javascript">
        $(function () {
            $("#messagebox").dialog({
                autoOpen: false,
                modal: true         // 如果不希望成为模式对话框，则可以去掉此属性定义
            });
            $("#messagebox2").dialog({
                autoOpen: false,
                modal: true,
                buttons: {
                    "确定": function () {
                        $(this).dialog("close");
                    },
                }
            });
            $("#confirmbox").dialog({
                autoOpen: false,
                modal: true,
                buttons: {
                    "确定": function () {
                        $(this).dialog("close");
                        $("#confirmresult").dialog("open");
                    },
                    "取消": function () {
                        $(this).dialog("close");
                    },
                }
            });
            $("#confirmresult").dialog({
                autoOpen: false
            });

            $("#registerbox").dialog({
                autoOpen: false,
                modal: true,
                buttons: {
                    "确定": function () {
                        // 在此处发送AJAX请求到服务端以执行操作
                        $(this).dialog("close");
                    },
                    "取消": function () {
                        $(this).dialog("close");
                    },
                }
            });
        });
        function messageBox() {
            $("#messagebox").dialog("open");
        }
        function messageBox2() {
            $("#messagebox2").dialog("open");
        }
        function confirmbox() {
            $("#confirmbox").dialog("open");
        }
        function register() {
            $("#registerbox").dialog("open");
        }
    </script>
</body>
</html>

